<template>
	<view class="content">
		<view class="top">
			<p class="returns"><<p>
			<p class="shezhi">设置</p>
		</view>
	<view>
		
		<view class="contentone">
			<uni-list>
				<uni-list-item>
					<text slot="body" class="slot-box slot-text">头像</text> 
					<template slot="footer">
						<image class="slot-image" src="/static/img/shezhi/touxiang.PNG" mode="widthFix"></image>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-list>
				<uni-list-item title="昵称" rightText="跳舞的小棕熊和小黄熊 >" />
				<uni-list-item title="手机号" rightText="去绑定 >" />
				<uni-list-item title="微信" rightText="去绑定 >" />
			</uni-list>
		</view>
		<view class="contenttwo">
			<uni-list>
				<uni-list-item title="推送消息设置" rightText=">" />
				<uni-list-item :show-extra-icon="false" :extra-icon="extraIcon" :show-switch="true" title="自动草稿" @switchChange="switchChange" />
				
			</uni-list>
		</view>
		<view class="contentthree">
			<uni-list>
				<uni-list-item title="去好评" rightText=">" />
				<uni-list-item title="推荐给朋友" rightText=">" />
				<uni-list-item title="关于我们" rightText=">" />
				
			</uni-list>
		</view>
		<view class="contentfour">
			<button class="btn" type="default">退出登录</button>
		</view>
	</view>
	</view>
</template>

<script>
		export default {
		}
</script>

<style>
	page{
		white:100%;
		height: 100%;
		background-color: #FAF8F8;
		}
	.top{
		width:100%;
		height: 60px;
		border-bottom: 1px solid #dadbe7;
	}
	.top p{
		display: inline-block;
		font-size: 18px;
	}
	.returns{
		margin-left: 2%;
		color:#99999F;
		font-family:"黑体";
		font-weight:bold;
	}
	.shezhi{
		width: 90%;
		margin-top: 4%;
		text-align: center;
	}
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 1%;
		width: 50px;
		height: 50px;
		border-radius:50%
	}
	.slot-text {
		flex: 1;
		font-size: 14px;
		color: #3B4144;
		font-weight: bold;
		margin-right: 10px;
	}
	.rightgo{
		display: inline-block;
		width: 40px;
		border: 1px solid #000000;
	}
	.contenttwo{
		margin-top: 5%;
		}
	.contentthree{
		margin-top: 5%;
	}
	.contentfour{
		margin-top: 5%;
	}
	.btn{
		color: #D43030;
		background-color: #FFFFFF;
		}
</style>
